<template>
	<div v-if="notFound">
		<div v-show="loadingShow">
			<loading></loading>
		</div>
		<div v-else>
			<div class="card-buy-list">
				<div class="card-head">
					<a href="javascript:;" class="head-btn" v-bind:class="{'class-cur': areaState}" v-on:click="showBlock('area')">{{defaultcityname}}<i class="icon-arrow"></i></a>
					<a href="javascript:;" class="head-btn" v-bind:class="{'class-cur': classifyState}" v-on:click="showBlock('classify')">{{defaultClassify}}<i class="icon-arrow"></i></a>
					<!--卡分类-->
					<div class="classify-box" v-bind:class="{'classify-show':classifyState}">
						<a href="javascript:;">{{defaultInfo}}</a>
						<a v-for="(key, item) in classifyData" id="abc" ca="P套餐卡_全部分类${{item.catalogName}}" class="class-btn" v-on:click="checkClassify(key,item.catalogCode,item.catalogName)" v-bind:class="{'btn-cur': item.classifyFalg}">{{item.catalogName}}</a>
					</div>
				</div>
				<div id="js_card_index" class="card-index">
					<card-type-a></card-type-a>
				</div>
				<div class="city-list-box" v-show="showArea">
					<city-list :defaultcityname="defaultcityname"></city-list>
				</div>
				<div>
		  			<!--<iframe :src="iframe" style="display: none" v-if="isIOSWechat"></iframe>-->
				</div>
			</div>
			<div class="black-pop" v-on:click="showBlock('black')" v-show="showBlack"></div>
		</div>
	</div>
</template>

<script>
//共用方法
import common from '../../utils/common.js';
import 'mint-ui/lib/style.css';
import cardTypeA from '../card-box/card-type-a';
import cityList from '../city-list/city-list';
import loading from '../common/loading';
import Vue from 'vue';
export default {
	data() {
		return {
			catalogCode:window.catalogCode, //默认目录Code
			defaultcityname:'',    //默认城市
			defaultClassify:'全部分类',    //默认分类

			cardListDataArray:'', //套餐卡列表数据
			//sf 开始
			pageSize: 2, //设置开始加载页数
			thisCityIndex: [],
			cityData: [],
			//sf 结束

			classifyMonitor: false,
			classifyIndex: '',
			//分类数量
			classifyData: [],
			//分类数据
			trimData: [],
			//分页
			loading: false,
			list: {},
			//分类按钮开启关闭状态
			areaState: false,
			classifyState: false,

			showArea: false,
			showBlack: false,
			cityId: '',
			
			defaultInfo: '',
			iframe: '',
			isIOSWechat: common.isIOSWechat(),
			loadingShow:true,
			notFound:true
		}
	},
	route: {
		//城市列表模块 begin
		data() {

			common.setTitle('套餐卡');  // 设置title
			//城市数据渲染
			this.$http.post(common.isdev() + '/cardList/queryAreaListByCatalogCode.htm').then(function(d) {
				//禁止加载数据时触发下拉加载更多
				sessionStorage.pullDownStopType = false;
				var resData = typeof d.data === 'object' ? d.data : JSON.parse(d.data),i,listCityId;
				
				if(resData.result === 1){

					for(i = 0; i < resData.obj.length; i++){

						if(resData.obj[i].defaultCity === 1){
							// 设置cityId
							this.cityId = resData.obj[i].cityId; //赋值默认城市ID
							localStorage.cardBuyCityId = this.cityId;
							listCityId = this.cityId;
							this.defaultcityname = resData.obj[i].cityName; //赋值默认城市名

						}

					}

					this.initCityData(resData,this.catalogCode);//渲染城市列表

					this.cardListData(this.catalogCode);//执行默认卡列表初始请求

				}else if(resData.result === 0){
					/******** 修改404页面 ********/
                    this.notFound = false;
                    common.goNotFound();
                    /******** 修改404页面 ********/
					//common.Toast(resData.message);
				}
			}, function(err) {

				common.Toast(err);

			});

			this.menuInitData();//执行默认商品目录请求
		}
	},
	components: {
		cardTypeA,
		cityList,
		loading
	},
	events: {
		'cityShowBlock' :function(type, cityName){

			this.showBlock(type);
			this.defaultcityname = cityName;
		},
		'cityCardRender': function(data, cityName, cityId) {

			//列表数据渲染
			this.cityId = cityId;
			
			this.defaultcityname = cityName;

			this.$broadcast('cardTypeAdata', cityName, data);

			this.defaultClassify = '全部分类';

			for(var i = 0; i < this.classifyData.length; i++){

				if(i == 0){
					this.classifyData[i].classifyFalg = true;
				}else{
					this.classifyData[i].classifyFalg = false;
				}

			}
		}
	},
	methods: {
		menuInitData:function(){
			//请求分类
			this.$http.post(common.isdev() + '/cardList/querySaleCatalogByCatalogCode.htm', {
					
					catalogCode: this.catalogCode
					
				}).then(function(d) {
					
					var resData = typeof d.data === 'object' ? d.data : JSON.parse(d.data);

					if( resData.result === 1 ) {
						
						if ( resData.obj !== null ) {
							
							resData.obj.childSaleCatalogVOList.unshift({
								catalogName: '全部',
								catalogCode: this.catalogCode
							});
		
							for(var i = 0; i < resData.obj.childSaleCatalogVOList.length; i++) {
		
								if(i == 0) {
									resData.obj.childSaleCatalogVOList[i].classifyFalg = true;
								} else {
									resData.obj.childSaleCatalogVOList[i].classifyFalg = false;
								}
		
							}
		
							this.classifyData = resData.obj.childSaleCatalogVOList;
							
						} else {
							this.defaultInfo = '暂无数据';
						}
						
					} else if(resData.result === 0) {
						/******** 修改404页面 ********/
                        this.notFound = false;
                        common.goNotFound();
                        /******** 修改404页面 ********/
						//common.Toast(resData.message);
					}
	
				}, function(err) {
					common.Toast(err);
					common.Toast('套餐卡列表查询出错--');
				});
		},
		initCityData: function(data,catalogCode) { //城市列表数据

			var i,
				cityData = {},
				transformData = data.obj;

			for(i = 0; i < transformData.length; i++) {
				
				if(cityData[transformData[i].initial] == undefined) {

					cityData[transformData[i].initial] = [];
					cityData[transformData[i].initial].push(transformData[i]);

				} else {

					cityData[transformData[i].initial].push(transformData[i]);

				}
				
			}

			this.cityData = cityData;
			//循环获取索引
			for(var item in cityData) {
				this.thisCityIndex.push(item);
			}
			this.thisCityIndex.sort();
			this.$broadcast('cityDatas', this.thisCityIndex, this.cityData, catalogCode);
			//城市列表模块 end
		},
		//分类切换
		checkClassify: function(type, catalogCode, classifyName) { //选中分类筛选

			//禁止加载数据时触发下拉加载更多
			sessionStorage.pullDownStopType = false;

			var thisClassifyData, i;

			for(i = 0; i < this.classifyData.length; i++) {

				if(i == type) {
					thisClassifyData = this.classifyData[i];
					thisClassifyData.classifyFalg = true;
					this.classifyData.$set(i, thisClassifyData);
				} else {
					thisClassifyData = this.classifyData[i];
					thisClassifyData.classifyFalg = false;
					this.classifyData.$set(i, thisClassifyData);
				}

			}
			if(classifyName == '全部'){
				this.defaultClassify = '全部分类';
			}else{
				this.defaultClassify = classifyName;
			}
			this.cardListData(catalogCode,this.cityId);
			this.showBlock('classify');

		},
		//卡列表请求方法
		cardListData: function(catalogCode, cityId) {

				this.$http.post(common.isdev() + '/cardList/queryCardList.htm', {

						currentPage: 1, //当前页数
						catalogCode: catalogCode, //目录code
						//pageSize: this.pageSize,
						cityId:this.cityId

					}).then(function(d) {

					var cardData = typeof d.data === 'object' ? d.data : JSON.parse(d.data);

					if( cardData.result === 1 ) {
							var loadingFlag;
							var cardListSkuCode = [];
							//console.log("请求出数据"+cardData);
							if(!cardData.obj.r){
								/******** 修改404页面 ********/
		                        this.notFound = false;
		                        common.goNotFound();
		                        /******** 修改404页面 ********/
		                        return false;
							}
							for(var i= 0; i < cardData.obj.r.length; i++){

								cardListSkuCode.push({"skuCode":cardData.obj.r[i].skuCode});

							}

							cardListSkuCode = JSON.stringify(cardListSkuCode);
							//请求价格
							this.$http.post(common.isdev() + '/pricePrmtHandle/queryCxjMdsePricePrmts.htm', {
								cityId:this.cityId,
								skus:cardListSkuCode

							}).then(function(d){
								var skuDataResult = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
								var skuData = typeof d.data === 'object' ? d.data.obj : JSON.parse(d.data).obj;
								
								if(skuDataResult.result === 1){
								
									for(var i = 0; i < cardData.obj.r.length; i++){

										for(var j = 0; j < skuData.length; j++){
											//回填价格
											if(cardData.obj.r[i].skuCode == skuData[j].skuCode){

												cardData.obj.r[i].cashPrice = skuData[j].cashPrice;
											}
										
										}//回填结束
									}
									if(cardData.obj != null){
										//传递数据到 card-type-a 子组件
										this.$broadcast('cardTypeAdata', this.defaultcityname, cardData.obj.r, cardData.obj.pagination.totalRows, catalogCode, this.cityId);
										this.loadingShow = false;

									}else{
										common.Toast(cardData.msg);
									}

								}else if(skuDataResult.result === 0){

									/******** 修改404页面 ********/
			                        this.notFound = false;
			                        common.goNotFound();
			                        /******** 修改404页面 ********/

								}

							},function(err) {

								common.Toast(err);

							});
						
						} else if(cardData.result === 0) {
							/******** 修改404页面 ********/
	                        this.notFound = false;
	                        common.goNotFound();
	                        /******** 修改404页面 ********/
							//common.Toast(resData.message);
						}
					}, function(err) {
						common.Toast(err);
				});
					
		},
		showBlock: function(type) { //TAB切换
			if(type == "black"){
				document.body.style.overflow = "auto";
				this.$set('areaState', false);
				this.$set('classifyState', false);
				this.$set('showArea', false);
				this.$set('showBlack', false);
			}
			if(type == "area") {

				if(this.areaState) {
					document.body.style.overflow = "auto";
					this.$set('areaState', false);
					this.$set('showArea', false);
					this.$set('showBlack', false);

				} else {
					document.body.style.overflow = "hidden";
					this.$set('areaState', true);
					this.$set('showArea', true);
					this.$set('showBlack', true);
					this.$set('classifyState', false);

				}

			} else if(type == "classify") {

				if(this.classifyState) {
					document.body.style.overflow = "auto";
					this.$set('classifyState', false);
					this.$set('showBlack', false);
				} else {
					document.body.style.overflow = "hidden";
					this.$set('classifyState', true);
					this.$set('showBlack', true);
					this.$set('areaState', false);
					this.$set('showArea', false);
				}
			}

		}
	},
	ready: function () {
	//console.log(document.getElementById('abc'));
/*		Vue.http.interceptors.push(function ( request, next ) {
			
//				this.loadingShow = true;
			next(function ( response ) {
//					this.active++;
//					active--;
				this.$nextTick(function () {
//						this.active++;
//						debugger;
					if (this.active == 1) {
				 		
				 		return response;
					}
				});
			});
		});*/
/*		common.setTitle('套餐卡');
*/
		//this.iframe = common.setTitleAgain('套餐卡', this.iframe);
	    // 传递提交页面

		var confirmObj = {
			recommendCodeShow: false,
			carShow: false,
			stroeShow: false,
			time: false,
			orderType: '05'
		} 

		localStorage.setItem('confirmObj', JSON.stringify(confirmObj));
		common.ANA_Analytics();
	}
}</script>

<style lang="scss" scoped>
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	@import "../../assets/css/toast.scss";
	.card-buy-list {
		padding-top: rem(50);
	}
	.city-list-box{
		position:fixed;
		top:rem(40);
		left:0;
		bottom:0;
		right:0;
		margin:auto;
		overflow-y:auto;
		z-index: 9;
		background-color:#fff;
	}
	.card-head{
		width:100%;
		position:fixed;
		top:0;
		left:0;
		height: rem(40);
		line-height: rem(40);
		background-color:#fff;
		z-index:10;
		display: inline-flex;
		justify-content:center;

		.head-btn{
			width:50%;
			text-align: center;
			display: block;
			color:#333;
			font-size:rem(14);
			border-top:1px solid #dedede;
			border-bottom: 1px solid #dedede;
		}
		.head-btn:nth-child(1){
			border-right:1px solid #dedede;
		}
		.icon-arrow{
			width:rem(6);
			height: rem(6);
			margin-top:rem(-4);
			margin-left:rem(5);
			display:inline-block;
			border-bottom:1px solid #b5b5b5;
			border-left:1px solid #b5b5b5;
			vertical-align: middle;
			transform:rotate(-45deg);
		}
		.class-cur{
			color:#0299f6;
			box-shadow:0px -3px 0px #0299f6 inset
		}
		.class-cur .icon-arrow{
			border-bottom: 1px solid #0299f6;
    		border-left: 1px solid #0299f6;
		}
		.classify-box{
			width:100%;
			position:absolute;
			top:rem(40);
			left:0;
			background-color:#fff;
			display:none;
			.class-btn{
				padding:0 rem(15) 0 0;
				margin-left:rem(15);
				text-align: center;
				height:rem(50);
				line-height: rem(50);
				font-size: rem(16);
				color:#3d4045;
				border-bottom:1px solid #dedede;
				display:block;
			}
			.icon-checked{
				float:right;
				display: none;
				color:#0299f6;
			}
			.btn-cur{
				color:#0299f6;
				.icon-checked{
					color:#0299f6;
					display: block;
				}
			}
			.btn-hide{
				.icon-checked{
					display: none;
				}
			}
		}
		.classify-show{
			display: block;
			text-align: center;
			a {
				color: $_333;
			}
		}

	}
	.black-pop{
		display:block;
		width:100%;
		height:100%;
		position:fixed;
		background-color:#000;
		opacity:0.7;
		top:0;
		left:0;
	}
	.card-index {
		padding:0 rem(15);
	}
	.city-list-box{
		.mint-indexsection-index{
			padding:0 10px;
			height:rem(25);
			line-height:rem(25);
		}
	}
</style>